import React from "react";
import {observer, inject} from 'mobx-react';
import * as mobx from 'mobx';
import {withRouter} from 'react-router-dom';
import {SwipeAction, List, Tools} from "weaver-mobile";
import {BrowserHrm, ListViewPage} from "weaver-mobile-page";
import jQuery from "jquery";

const getLabel = Tools.getLabel;


@withRouter
@inject("odocRequestStore")
@observer
export default class DirectionList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {listHeight: 0};

        this.getTemplate = this.getTemplate.bind(this);
    }

    componentDidMount() {
        this.updateListHeight();

        jQuery(window).resize(() => {
            this.updateListHeight();
        });
    }

    componentDidUpdate() {
        this.updateListHeight();
    }

    updateListHeight() {
        const height = document.documentElement.clientHeight;
        const listHeight = height - 45 - 41 - 47;   //减去的3个高度，分别是顶部的navbar，结束本人处理check框，底部的操作按钮

        if (listHeight != this.state.listHeight) {
            this.setState({listHeight});
        }
    }

    getTemplate() {
        const {odocRequestStore} = this.props;
        const {nodeHrmStoreMap, nodeOperatorMap, directionListStore} = odocRequestStore;
        const {selectedRowKeys} = directionListStore;
        const selectedIdSet = new Set(mobx.toJS(selectedRowKeys));
        const nodeUserMap = mobx.toJS(nodeOperatorMap);

        const listTemplate = {
            default: [
                {
                    key: 'col1',
                    configs: [
                        {key: 'row1', configs: [{key: 'nodename'}]},
                        {
                            key: 'row2',
                            configs: [{key: 'userIds'}],
                            render: (item, itemKeys, index) => {
                                const {nodeid, sqlwhere = "", sqlwhere1 = ""} = item;
                                const multiHrmStore = nodeHrmStoreMap[nodeid];

                                let userList = [];
                                if ([nodeid] in nodeUserMap) {
                                    const userInfo = nodeUserMap[nodeid];
                                    userList = userInfo.userList;
                                }

                                const browserParams = {sqlwhere};
                                const browserParams1 = {sqlwhere: sqlwhere1};

                                let viewAttr = 2;
                                if (selectedIdSet.has(nodeid)) {
                                    viewAttr = 3
                                }

                                return <BrowserHrm
                                    placeholder={getLabel(523429,"请选择操作人员")}
                                    store={multiHrmStore}
                                    hasAdvanceSerach={true}
                                    isSingle={false}
                                    viewAttr={viewAttr}
                                    type={17}
                                    onChange={(ids, names, datas) => {
                                        datas = mobx.toJS(datas);
                                        const rowData = {userIds: ids, userNames: names, userList: datas};
                                        this.onUpdateRow(nodeid, rowData);
                                    }}
                                    valueArray={userList}
                                    conditionDataParams={{...browserParams1}}
                                    completeParams={{...browserParams}}
                                    dataParams={{...browserParams}}
                                />
                            }
                        },
                    ],
                },
            ]
        };

        return listTemplate;
    }

    onUpdateRow(recordId, rowData) {
        const {odocRequestStore} = this.props;
        odocRequestStore.updateRow(recordId, rowData);
    }

    onClearRow(data) {
        const {nodeid} = data;
        const {odocRequestStore} = this.props;
        odocRequestStore.clearRow(nodeid);
    }

    render() {
        const {listHeight} = this.state;
        const {odocRequestStore} = this.props;
        let {directionListStore} = odocRequestStore;

        const swipeActionProps = {
            right: [
                {
                    text: getLabel(	523406,"清空操作人员"),
                    onPress: data => {
                        this.onClearRow(data);
                    },
                    style: {backgroundColor: "#55B1F9", color: "#FFFFFF"},
                }
            ]
        };

        return (
            <div className="odoc-direction-list" style={{height: listHeight}}>
                <div className="direction-list" style={{height: listHeight}}>
                    <ListViewPage.Normal
                        showCheck={true}
                        withSwipeAction={true}
                        swipeActionProps={swipeActionProps}
                        getDataCustom={true}
                        rowKey="nodeid"
                        store={directionListStore}
                        customHeight={listHeight}
                        getTemplate={this.getTemplate}
                        key="odoc-direction-list"/>
                </div>
            </div>
        );
    }
}
